<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript">
		function a(id){
			return document.getElementById(id);
		}
		window.onload = function(){
			var cnv = a("canvas");
			var cxt = cnv.getContext("2d");
			
			createPolygon(50,50,5,40,cxt);
			var movex,movey;
			function createPolygon(dx,dy,n,size,cxt){
				cxt.beginPath();
				for(var i =0;i<n;i++){
					var x = size * Math.cos(i*2*Math.PI/n)+dx;
					var y = size * Math.sin(i*2*Math.PI/n)+dy;
					cxt.lineTo(x,y);
				}
				cxt.fillStyle = "red";
				cxt.fill();
				cxt.closePath();
			}
			cnv.addEventListener("mousedown",downfun);
			function downfun(e){
				var x = e.clientX;
				var y = e.clientY;
				if(cxt.isPointInPath(x,y)){
					cnv.addEventListener("mousemove",movefun);
				}
				cnv.addEventListener("mouseup",upfun);
			}
			function movefun(e){
				movex = e.clientX;
				movey = e.clientY;
				cxt.clearRect(0,0,cnv.width,canvas.height);
				createPolygon(movex,movey,5,40,cxt);
			}
			function upfun(){
				cnv.removeEventListener("mousemove",movefun);
			}
		}
	</script>
	<body>
		<canvas id="canvas" width="400" height="300" style="border: 1px solid red;"></canvas>
	</body>
</html>